<?php $path = base_url().'public/frontend/';?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Petshop</title>
    <link href="<?php echo $path ;?>css/bootstrap.min.css" rel="stylesheet">
    <link href="<?php echo $path ;?>css/font-awesome.min.css" rel="stylesheet">
    <link href="<?php echo $path ;?>css/prettyPhoto.css" rel="stylesheet">
    <link href="<?php echo $path ;?>css/price-range.css" rel="stylesheet">
    <link href="<?php echo $path ;?>css/animate.css" rel="stylesheet">
    <link href="<?php echo $path ;?>css/main.css" rel="stylesheet">
    <link href="<?php echo $path ;?>css/responsive.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="<?php echo $path ;?>js/html5shiv.js"></script>
    <script src="<?php echo $path ;?>js/respond.min.js"></script>


    <![endif]-->
    <script src="<?php echo $path ;?>js/jquery.js"></script>
    <script src="<?php echo $path ;?>js/bootstrap.min.js"></script>
    <script src="<?php echo $path ;?>js/jquery.scrollUp.min.js"></script>
    <script src="<?php echo $path ;?>js/price-range.js"></script>
    <script src="<?php echo $path ;?>js/jquery.prettyPhoto.js"></script>
    <script src="<?php echo $path ;?>js/main.js"></script>
    <link rel="shortcut icon" href="images/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo $path ;?>images/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo $path ;?>images/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo $path ;?>images/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="<?php echo $path ;?>images/ico/apple-touch-icon-57-precomposed.png">
    <style type="text/css">
        .dropdown-menu1:before {
            border-bottom: 7px solid #C3C3C3;
            border-left: 7px solid rgba(0, 0, 0, 0);
            border-right: 7px solid rgba(0, 0, 0, 0);
            content: "";
            display: inline-block;
            zoom: 1;
            left: auto;
            position: absolute;
            right: 17px;
            top: -7px;
        }
        .dropdown-menu1 {
            position: absolute;
            top: 130%;
            left: 70%;
            z-index: 1000;
            display: block;
            float: left;
            min-width: 150px;
            min-height: 200px;
            padding: 5px 0;
            margin: 2px 0 0;
            list-style: none;
            font-size: 14px;
            max-width: 240px;
            background-color: #ffffff;
            border: 1px solid #cccccc;
            border: 1px solid rgba(0, 0, 0, 0.15);
            border-radius: 4px;
            -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
            background-clip: padding-box;

        }
        .shopper-info input{
            background: #F0F0E9;
            border: medium none;
            color: #696763;
            display: block;
            font-family: 'Roboto', sans-serif;
            font-size: 14px;
            font-weight: 300;
            height: 40px;
            margin-bottom: 10px;
            outline: medium none;
            padding-left: 10px;
            width: 100%;
        }
    </style>
</head><!--/head-->

<body>
<header id="header"><!--header-->
    <div class="header_top"><!--header_top-->
        <div class="container">
            <div class="row">
                <div class="col-sm-6">
                    <div class="contactinfo">
                        <ul class="nav nav-pills">
                            <li><a href="#"><i class="fa fa-phone"></i> 0977409690</a></li>
                            <li><a href="#"><i class="fa fa-envelope"></i> petshop@gmail.com</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="social-icons pull-right">
                        <ul class="nav navbar-nav">
                            <li><a href="#"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="#"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div><!--/header_top-->
    <div class="header-middle"><!--header-middle-->
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <div class="logo pull-left">
                        <a href="<?php echo base_url() ;?>frontend/home"><img src="<?php echo $path ;?>images/home/logo.png" alt="" /></a>
                    </div>
                </div>
                <div class="col-sm-8">
                    <div class="shop-menu pull-right">
                        <ul class="nav navbar-nav">
                            <?php if(!$is_logged_in) {
                                ?>
                                <li><a href="<?php echo base_url() ;?>frontend/user/register"><i class="fa fa-user"></i>Registration</a></li>
                                <li><a href="#" onclick="login()"><i class="fa fa-lock"></i>Login</a></li>
                            <?php
                            } else {
                                ?>
                                <li><a href="<?php echo base_url() ;?>frontend/purchase/cart"><i class="fa fa-shopping-cart"></i> Cart</a></li>
                                <li><a href="<?php echo base_url() ;?>frontend/user/userInformation"><span>Hello, </span><b style="color: orange"> <?php echo $fullname?></b></a></li>
                                <li><a href="<?php echo base_url() ;?>frontend/user/logout">Log Out</a></li>
                            <?php
                            }?>


                        </ul>
                        <div id="loginBox" class="dropdown-menu1" style="display: none">
                            <form accept-charset="UTF-8" action="/petshop/frontend/user/register" method="post">
                                <input name="form_type" type="hidden" value="customer_login">
                                <input name="utf8" type="hidden" value="✓">
                                <div id="bodyBox">
                                    <ul class="control-container customer-accounts list-unstyled">
                                        <li class="clearfix" style="margin-top: 10px">
                                            <label for="username_login" class="control-label">Username <span class="req">*</span></label>
                                            <input type="text" value="" name="username_login" class="form-control">
                                        </li>
                                        <li class="clearfix" style="margin-top: 10px">
                                            <label for="password_login" class="control-label">Password <span class="req">*</span></label>
                                            <input type="password" value="" name="password_login" class="form-control password">
                                        </li>
                                        <li class="clearfix last1" style="margin-top: 20px">
                                            <button name="submit" value="login" class="btn btn-default" style="background: #FE980F;
                                                                                                    border: medium none;
                                                                                                    border-radius: 0;
                                                                                                    color: #FFFFFF;
                                                                                                    display: block;
                                                                                                    font-family: 'Roboto', sans-serif;
                                                                                                    padding: 6px 25px;" type="submit">Login</button>
                                            <span>or</span>
                                            <a href="<?php echo base_url() ;?>frontend/user/forget">Forgot Password ?</a>
                                        </li>
                                    </ul>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!--/header-middle-->


    <div class="header-bottom"><!--header-bottom-->
        <div class="container">
            <div class="row">
                <div class="col-sm-9">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="mainmenu pull-left">
                        <ul class="nav navbar-nav collapse navbar-collapse">
                            <li><a href="<?php echo base_url() ;?>frontend/home" class="active">Home</a></li>
                            <li class="dropdown"><a href="<?php echo base_url() ;?>frontend/news">News</a>

                            </li>
                            <li class="dropdown"><a href="<?php echo base_url() ;?>frontend/news">Promotion</a>
                            </li>
                            <li><a href="<?php echo base_url() ;?>frontend/contact">Contact</a></li>
                        </ul>
                    </div>
                </div>
                <div class="col-sm-3">
                    <div class="search_box pull-right">
                        <input type="text" placeholder="Search"/>
                    </div>
                </div>
            </div>
        </div>
    </div><!--/header-bottom-->
</header><!--/header-->
<section id="cart_items">
    <div class="container">
        <form method="post">
            <div class="table-responsive cart_info">
                <table class="table table-condensed">
                    <thead>
                    <tr class="cart_menu">
                        <td class="image">Item</td>
                        <td class="description"></td>
                        <td class="price">Price</td>
                        <td class="quantity">Quantity</td>
                        <td class="total">Amount</td>
                        <td></td>
                    </tr>
                    </thead>
                    <tbody id="tbody">

                    <?php
                    $total = 0;
                    foreach ($products as $p) {
                        ?>

                        <tr data-id="<?php echo $p->product_id ?>">
                            <td class="cart_product">
                                <a href=""><img src="<?php
                                    if (strpos($p->url_image, '//'))
                                        echo $p->url_image;
                                    else echo base_url().'public/images/'.$p->url_image; ?>" alt="" style="width: 150px;height: 150px; margin-right: 50px"></a>
                            </td>
                            <td class="cart_description" style="padding-left: 30px">
                                <h4><a href=""><?php echo $p->product_name ?></a></h4>
                                <p>Web ID: <?php echo $p->product_id ?></p>
                            </td>
                            <td class="cart_price">
                                <p>$<?php echo $p->unit_price ?></p>
                            </td>
                            <td class="cart_quantity">
                                <div class="cart_quantity_button">
                                    <a class="cart_quantity_up" onclick="changeQuantity(<?php echo $p->product_id ?>,1,<?php echo $p->unit_price ?>)" style="cursor: pointer; cursor: hand"> + </a>
                                    <input id="quantity_<?php echo $p->product_id ?>" class="cart_quantity_input" type="text" name="quantity" value="<?php echo $p->quantity ?>" autocomplete="off" size="2" >
                                    <a class="cart_quantity_down" onclick="changeQuantity(<?php echo $p->product_id ?>,-1,<?php echo $p->unit_price ?>)" style="cursor: pointer; cursor: hand"> - </a>
                                </div>
                            </td>
                            <td class="cart_total">
                                <p class="cart_total_price cart_total_price_<?php echo $p->product_id ?>">$<?php echo $p->unit_price*$p->quantity ?></p>
                            </td>
                            <td class="cart_delete">
                                <a class="cart_quantity_delete" data-id="<?php echo $p->product_id ?>" style="cursor: pointer; cursor: hand" ><i class="fa fa-times"></i></a>
                            </td>
                        </tr>

                        <?php
                        if ($user[0]->discount!=0){
                            $total += $p->unit_price*$p->quantity*(1-$user[0]->discount);
                        }
                        else {
                            $total += $p->unit_price*$p->quantity;
                        }

                    }

                    ?>
                    <tr id="trdiscount">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="discount">
                            <p>Member Discount:</p>
                        </td>
                        <td class="discount">
                            <p class="discount" id="discount" data-dc="<?php echo $user[0]->discount?>"><?php echo $user[0]->discount*100 ?>%</p>
                        </td>
                    </tr>
                    <tr id="trTotal">
                        <td></td>
                        <td></td>
                        <td></td>
                        <td class="cart_description">
                            <p>SUBTOTAL:</p>
                        </td>
                        <td class="cart_total">
                            <p class="cart_total_price" id="total"><?php echo $total ?></p>
                        </td>
                    </tr>



                    </tbody>
                </table>
            </div>
            <div class="row" id="checkoutForm" style="display: none">
                <div class="col-sm-3">

                </div>
                <div class="col-sm-4">
                    <div class="shopper-info">
                        <p>Customer Information</p>
                            <input type="text" placeholder="Received Address" name="received_address" required>
                            <input type="number" placeholder="Contact number" name="contact_number" required>
                            <input type="text" required name="time_received" placeholder="Received Time" onfocus="(this.type='time')" onblur="(this.type='text')"/>
                            <input type="text" required name="date_received" placeholder="Received Date" onfocus="(this.type='date')" onblur="(this.type='text')"/>
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="order-message">
                        <p>Shipping Note</p>
                        <textarea name="message" placeholder="Notes about your order, Special Notes for Delivery" rows="8" style="height: 190px"></textarea>
                            <button type="submit" name="submit" value="payment" class="btn btn-default" style="background: #FE980F;
                                                                                                    border-radius: 0;
                                                                                                    color: #FFFFFF;
                                                                                                    margin-top: 18px;
                                                                                                    border: none;
                                                                                                    padding: 5px 15px;">Payment</button>
                    </div>
                </div>
            </div>
            <input type="text" value="<?php echo $total ?>" name="cart_total" id="cart_total" hidden="hidden">
            <section id="do_action">
                <div class="container">
                    <div class="row">
                        <a class="btn btn-default update" id="updateButton">Update</a>
                        <a class="btn btn-default check_out" onclick="checkout()">Check Out</a>
                    </div>
                </div>
    </div>
            </section><!--/#do_action-->
        </form>

</div>
</section> <!--/#cart_items-->
<script type="text/javascript">
    function up(){
        var count = $('#tbody').find('tr').length;
        $('#tbody').find('tr').each(function(i,e){
            if ($(e).attr('id')=='trTotal') return;
            var pid = $(e).attr('data-id');
            var quantity = $(e).find('input').val();
            $.post('<?php echo base_url() ;?>frontend/purchase/add_cart',{
                pid : pid,
                quantity : quantity
            })
        })
    }
    $('#checkoutForm').fadeOut();
    var y = false;
    function checkout(){
        if (!y)
        {
            <?php if(count($products) == 0){ ?>
                alert("No products in cart");
            <?php } else {?>
                $('#checkoutForm').fadeIn();
                $('#updateButton').hide();
                $('.cart_quantity_up').fadeOut();
                $('.cart_quantity_down').fadeOut();
                up();
                $('.cart_quantity_input').prop('disabled', 'disabled')
                $('.cart_delete').fadeOut();
                var z = $('#total').html();
                $('#cart_total').val(eval(z));
                y = true;
            <? }?>
        }
        else {
            $('#checkoutForm').fadeOut();
            $('#updateButton').show();
            $('.cart_quantity_up').fadeIn();
            $('.cart_quantity_down').fadeIn();
            $('.cart_quantity_input').prop('disabled', false)
            $('.cart_delete').fadeIn();
            y = false;
        }
    }

</script>
<script>
    var changeQuantity = function(id,i,price){
        $('#quantity_'+id).val(parseInt($('#quantity_'+id).val())+i);
        if (parseInt($('#quantity_'+id).val())<0) $('#quantity_'+id).val(0);
        var quantity = parseInt($('#quantity_'+id).val());
        $('.cart_total_price_'+id).text('$'+ Number((quantity*price).toFixed(2)));

        $('.cart_quantity_input').change();
    };

    $('.cart_quantity_delete').click(function(){
        var id = $(this).attr('data-id');
        $('#quantity_'+id).val(0);
        $('.cart_total_price_'+id).text('$0');
        $('.cart_quantity_input').change();
        $.post('<?php echo base_url() ;?>frontend/purchase/delete_cart',{
            pid : id
        }).done(function(){
            location.reload();
        })
        $(this).closest('tr').fadeOut();
    });

    $('.cart_quantity_input').change(function(){
        var total = 0;

        $('.cart_total_price').each(function(i,e){
            if ($(e).attr('id')=='total') return;
            total += parseFloat($(e).text().replace('$',''));
        });

        $('#total').text(Number((total*(1-parseFloat($('#discount').attr('data-dc')))).toFixed(2)));
    });

    $('.update').click(function(){
        var count = $('#tbody').find('tr').length;
        $('#tbody').find('tr').each(function(i,e){
            if ($(e).attr('id')=='trTotal') return;
            var pid = $(e).attr('data-id');
            var quantity = $(e).find('input').val();
            $.post('<?php echo base_url() ;?>frontend/purchase/add_cart',{
                pid : pid,
                quantity : quantity
            }).done(function(){
                if (--count == 1) location.reload();
            });
        })
    })
</script>



</body>
</html>